Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: avatar profile centralized, session handling, SEO tags, refactored referrals and other minor fixes #448

Merged
merged 28 commits into from
Jan 20, 2025

Conversation

cswni
Copy link
Contributor

@cswni cswni commented Jan 20, 2025

This pull request includes several significant updates to the project, focusing on refactoring components, adding new features, and improving user authentication and session management.

Component Refactoring and Enhancements:

  • Introduced a new AvatarProfile component that uses the dicebear API to generate random avatars if the provided src is not a valid URL. (src/components/avatar/avatar.tsx, src/components/avatar/index.ts) [1] [2]
  • Replaced instances of the Avatar component with the new AvatarProfile component across multiple files for consistency and better user experience. (src/components/login-modal/profile-form-view.tsx, src/components/poster/variants/poster-creators.tsx, src/components/poster/variants/poster-top-titles.tsx, src/components/publication-detail-main.tsx) [1] [2] [3] [4]

Authentication and Session Management:

  • Added session expiration management to store session expiration time in local storage and handle user session accordingly. (src/auth/context/web3Auth/config/web3AuthSettings.ts, src/components/login-modal/modal.tsx) [1] [2]
  • Updated the login modal to fetch and store the user's email upon login and handle profile creation success using a callback. (src/components/login-modal/modal.tsx) [1] [2] [3]

Meta Tags and SEO:

  • Removed the hardcoded meta tags from index.html and refactored them into a new OgMetaTags component to dynamically manage Open Graph and Twitter meta tags. (index.html, src/components/og-meta-tags.tsx) [1] [2]

Dependency Updates:

  • Added the @emailjs/browser package to the project dependencies. (package.json)

Code Quality Improvements:

  • Improved code readability and maintainability by adding missing imports, reordering existing imports, and using useCallback for better performance in the ProfileFormView and LoginModal components. (src/components/login-modal/modal.tsx, src/components/login-modal/profile-form-view.tsx) [1] [2] [3] [4]

cswni and others added 24 commits January 14, 2025 09:55
- Added `handleBackdropClick` function in `modal.tsx` to close the modal when the backdrop is clicked in the 'profile' view.
- Updated `BackdropProps` to use `handleBackdropClick` for the `onClick` handler.
This improves user experience by allowing seamless modal closure in the specified view.
- Renamed `BoxRow` to `FinanceBoxRow` in `finance-withdraw.tsx` and `finance-deposit.tsx` files.
- Updated import paths and component references to reflect the new name.
- Renamed file `box-row.tsx` to `finance-box-row.tsx` for consistency and updated its default export.
This improves clarity and aligns naming with the domain context.
- Replaced MUI `Avatar` with custom `AvatarProfile` component across the codebase.
- Extracted Dicebear URL generation logic into a reusable `dicebear` utility function.
- Updated `dicebear` references to ensure consistent and centralized avatar fallback management.
- Added the new `AvatarProfile` component under `@src/components/avatar/avatar.tsx`.

This improves maintainability, simplifies avatar handling, and replaces repetitive logic related to avatars.
- In `src/sections/user/profile-header.tsx`, replaced `dicebear` fallback with `profile?.id`.
- In `src/sections/publication/publication-comment-item.tsx`, replaced `dicebear` fallback with `comment?.by?.id`.

This simplifies avatar fallback logic by removing unused utility calls and relying directly on IDs.
- Updated `web3AuthSettings.ts` to include `sessionTime` option set to 30 days.
- Ensures longer session persistence for Web3Auth users by default.
- **src/sections/user/profile-header.tsx**: Enhanced the profile header by integrating the `BadgeVerified` component alongside the user's display name for visualizing verification status.
- **src/components/user-item/index.tsx**: Introduced `UserNameAndBadge` component for combining user names with verification badges in the user list. Added `BadgeVerified` component to display the verification status.
- **src/components/user-item/BadgeVerified.tsx**: Created `BadgeVerified` component to check and render a verification icon for users based on their ID.
…fer to/from to history table, added tx row to history table, added padding to deposit modal, added min to register form and edit
- Updated tooltip text in `openable-text.tsx` from "Abrir en una nueva ventana" to "Open in new window".
- Ensures consistency with the application's primary language and improves user experience.
- Added `email` field to the AuthReducerState in `src/redux/auth/index.ts` to track user email data.
- Updated the initial state with a default empty string for `email`.
- Created a new `setEmail` action for updating the email field and exported it with other actions.
- Added `EMAIL_API_KEY`, `EMAIL_SERVICE_ID`, and `EMAIL_TEMPLATE_ID` to `src/config-global.ts`.
- These new variables enable integration with the EmailJS service for email functionality.
- Updated `modal.tsx` in `src/components/login-modal`:
  - Added import for `setEmail` action and `AuthUserInfo` type.
  - Integrated logic to fetch user email using `getUserInfo` and dispatch it with `setEmail`.
- Removed `storeEmailData` function in `finance-invite-friends.tsx` and replaced it with `sendInvitation` from `useReferrals` to handle invitation logic.
- Updated import statements to include `useReferrals` and remove unused `supabase`.
- This change improves modularity and centralizes referral logic for better maintainability.
- Updated `user-profile-view.tsx` to include a new "Referrals" tab.
- Created `profile-referrals.tsx` to display referrals with sorting and pagination.
- Implemented `profile-referrals-table-row.tsx` to manage individual referral rows in the table.
- Added `use-referrals.ts` custom hook for managing referrals API and email functionality.
- Updated `table-pagination-custom.tsx` to set the container's `Box` width to `100%`, ensuring it spans the full width of its parent component.
- This change improves layout consistency where the pagination is used.
- Updated `package.json` to include `@emailjs/browser` v4.4.1
- This library is necessary for handling browser-based email functionalities in the project.
…er and show a local notification informing the status
- **src/utils/supabase-actions.ts**:
  - Created a new utility module to handle all Supabase operations related to invitations.
  - Added functions: `fetchInvitations`, `checkIfMyEmailHasPendingInvite`, `acceptInvitation`, `checkIfInvitationSent`, `checkIfEmailAlreadyAccepted`, `sendInvitation`, and `acceptOrCreateInvitationForUser`.

- **src/hooks/use-referrals.ts**:
  - Refactored the hook to utilize the newly created Supabase actions module.
  - Replaced inline Supabase queries with calls to utility functions for better maintainability.
  - Simplified and cleaned up methods, removing redundant error handling and comments.
- Update `self_invite` to `self_register` in `src/utils/supabase-actions.ts`.
- Ensures correct payload key usage for handling self-registration actions.
@cswni cswni requested review from geolffreym and Jadapema January 20, 2025 17:53
@cswni cswni added the Refactor label Jan 20, 2025
@cswni cswni self-assigned this Jan 20, 2025
@geolffreym
Copy link
Member

geolffreym commented Jan 20, 2025

@cswni @Jadapema can we clean the sonarcloud issues?

@Jadapema Jadapema linked an issue Jan 20, 2025 that may be closed by this pull request
cswni added 2 commits January 20, 2025 16:58
- **poster-top-titles.tsx**: Removed unnecessary `as any` assertion for `picture` metadata URI.
- **use-is-verified.ts**: Switched from `||` to `??` for error fallback handling.
- **finance-quick-transfer.tsx**: Introduced explicit typing with `ProfilePicture_ImageSet_` and adjusted avatar logic for clarity.
- **publication-detail-main.tsx**: Improved `picture` metadata URI fallback, removing redundant `any` assertions.
- **publication-details-view.tsx**: Added a `customImage` prop for OG meta tags fallback.
- **profile-referrals-table-row.tsx**: Marked `Props` as readonly for better immutability.
- **publication-comment-item.tsx**: Removed `as any` assertion and refined fallback logic for comment avatars.
- Updated the `ProfilePicture_ImageSet_` interface to `ProfilePicture`.
- Adjusted type casting within AvatarProfile component to match the updated interface.
This resolves potential type inconsistencies and ensures cleaner, more accurate code.
@cswni
Copy link
Contributor Author

cswni commented Jan 20, 2025

@cswni @Jadapema can we clean the sonarcloud issues?

@geolffreym @Jadapema fixed issues related with sonarcloud

@geolffreym geolffreym merged commit d5c41d4 into next Jan 20, 2025
2 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment